<template lang="pug">
  li(:class="{'open':isOpen,'active':item.isActive,'has-subtitle':item.enName && item.enName !==''}")
    a.clearfix(
      @click="clickMenu()")
      i.menu-icon(v-if="item.icon",:class="['iconfont', 'icon-' + item.icon]")
      .title(:class="{'justify justify-title':item.enName && item.enName !==''}") {{item.label}}
        span
      .subtitle.justify(v-if="item.enName && item.enName !==''")  {{item.enName|enNameFilter}}
        span
      i.arrow.iconfont(v-if="item.children")
    ul(v-if="item.children")
      NavItem(
        v-for="child in item.children"
        :key="child.id"
        :item="child"
        @updateScroll="updateScroll")
</template>

<script>
export default {
  name: 'NavItem',
  props: {
    item: Object
  },
  data () {
    return {
      isOpen: this.item.isCurrent && this.item.children
    }
  },
  filters: {
    enNameFilter (enName) {
      return enName.split('').join(' ')
    }
  },
  methods: {
    clickMenu () {
      if (this.item.children) {
        this.changeOpen()
      } else {
        this.linkTo()
      }
    },
    changeOpen () {
      this.isOpen = !this.isOpen
      this.$emit('updateScroll')
    },
    updateScroll () {
      this.$emit('updateScroll')
    },
    linkTo () {
      window.location.href = this.item.url
    }
  }
}
</script>

<style lang="sass" scoped>
/* 需求硬爱两端对齐，没办法，见谅 */
.justify
  text-align: justify
  width: 120px
  font-size: 15px
  height: 18px
  >span
    display: inline-block /* Opera */
    padding-left: 100%
.has-subtitle
  > a
    padding: 10px 4px
  a i.menu-icon
    float: left
    margin-right: 10px
    line-height: 40px
    font-size: 28px
  .justify-title
    display: block
    line-height: 24px
  .subtitle
    padding-top: 4px
    display: block
    line-height: 16px
    font-size: 10px
    letter-spacing: -2px
  .arrow
    float: right
    line-height: 40px
</style>
